Customizing ChartToolBar

The ChartToolBar component supports full customization. You can provide your own toolbar items, define custom actions, and set the data source and delegate. This guide shows how to add custom elements to the toolbar in a ChartScreen.

Basic concepts

• DataSource: Provides toolbar items (ChartToolBar.Item).
• Delegate: Handles toolbar events, such as slider updates.
• Custom Items: Define items with custom actions, icons, and behaviors.

Example: Custom toolbar handler

The example below shows how to implement a custom data source and delegate to define toolbar items and behavior:

import DXChart
import UIKit
final class CustomToolbarHandler: DXChart.ChartToolBar.DataSource, ChartToolBar.Delegate {
  let dataProvider: DXChart.DataProvider
  var chartViewController: ChartScreen.ViewController!
  
  init(dataProvider: DXChart.DataProvider) {
      self.dataProvider = dataProvider
  }
  
  func chartToolBarView(_ chartToolBarView: DXChart.ChartToolBar, updateValueFromSlider: Int) {
      print("Updated value \(updateValueFromSlider)")
  }
  
  var items: [DXChart.ChartToolBar.Item] {
      [
          .init(
              id: "Search",
              icon: UIImage(systemName: "magnifyingglass")!,
              action: { [weak self] _ in
                  let searchViewController = SearchInstrument.makeScreen(
                      ipfDataProvider: dataProvider.ipfDataProvider,
                      onChangeInstrument: { [weak self] newInstrument in
                          guard let newInstrument else { return }
                          self?.chartViewController.changeInstrument(newInstrument)
                      }
                  )
                  self?.chartViewController.present(searchViewController, animated: true)
              }
          ),
          .init(
              id: "change theme",
              icon: UIImage(systemName: DXChartApp.settingsManager.settings.selectedTheme == .light ? "lightbulb.led" : "lightbulb.led.fill")!,
              action: { [weak self] _ in
                  guard let self else { return }
                  var settings = DXChartApp.settingsManager.settings
                  settings.selectedTheme = settings.selectedTheme == .light ? .dark : .light
                  self.chartViewController.updateSettings(settings)
              }
          ),
          .init(
              id: "aggregation",
              actionType: .switcher,
              title: DXChartApp.dataStorage.aggregation.title,
              isSelected: chartViewController.state.isAggregationPickerShowing,
              action: { [weak self] isSelected in
                  self?.chartViewController.updateAggregationPickerShowing(!chartViewController.state.isAggregationPickerShowing)
              }
          ),
      ]
  }
}

Example: Filtering default toolbar items

You can access and modify the default toolbar items from the chart view controller. For example, to hide the first item (usually the search button):

// Assuming you have a reference to the chart view controller
let defaultItems = chartViewController.defaultToolBarItems
let filteredItems = Array(defaultItems.dropFirst()) // hides the first item (e.g., search)
// Or, to filter by id:
let filteredById = defaultItems.filter { $0.id != "search" }

Use the filtered items in a custom data source:

var items: [DXChart.ChartToolBar.Item] {
  chartViewController.defaultToolBarItems.filter { $0.id != "search" }
}

Integrating the custom toolbar in a ChartScreen

Pass your custom handler when creating the chart screen:

let customToolbarHandler = CustomToolbarHandler(dataProvider: dataProvider)
let chartViewController = ChartScreen.makeScreen(
  dataProvider: dataProvider,
  delegate: quoteOperationsHandler,
  toolbarDataSource: customToolbarHandler,
  toolbarDelegate: customToolbarHandler,
  logoImage: nil,
  shouldShowLogo: false,
  shouldShowToolbar: true
)
customToolbarHandler.chartViewController = chartViewController

Tips

• Combine default and custom items to build a tailored toolbar.
• Use the action closure in ChartToolBar.Item to handle tasks like presenting a screen, switching themes, or other actions.
• To update the toolbar, modify the items array in your data source and call reload() on the toolbar.

Use this approach when your app needs precise control over the toolbar inside a ChartScreen.